import React, { useEffect, useState } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
} from 'antd';
type propTs={
    onFinish?:Function,
    title:string,
    itemobj?:any
}

const Myform = (props:propTs) => {
    const onFinish= (values:any) => {
        props.onFinish?.(values)
      };
      const [form] = Form.useForm() 
      useEffect(()=>{
        if(props.title=="编辑"){
            form.setFieldsValue(props.itemobj)
        }
      },[])
    return (
        <Form
            onFinish={onFinish}
            form={form}
            style={{ maxWidth: 600 }}
        >
            <Form.Item label="用户名" name="name">
                <Input />
            </Form.Item>
            <Form.Item label="角色" name="role">
                <Select>
                    {
                        props.data.map(item => {
                            return <Select.Option value={item}>{item == 1 ? '超级管理员' : '开发者'}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item label="简介" name="desc">
                <Input />
            </Form.Item>
            <Form.Item label="标签" name="tags">
                <Radio.Group
                    options={[
                        { value: 1, label: '前端工程师' },
                        { value: 2, label: '后端工程师' },
                        { value: 3, label: '全栈工程师' },
                    ]}
                />
            </Form.Item>
            <Form.Item >
                <Button htmlType='submit'>保存</Button>
            </Form.Item>
        </Form>
    );
};

export default Myform;